Skip to main content
Version: 1.0.0

Setting group - Rich text content settings

The Rich text content settings group is essential for controlling the overall look and feel of your shop's theme. These settings are applied globally but can be customized at the section or block level for more detailed adjustments. Key components include options for text alignment, icon positioning, and button styles, providing a comprehensive toolkit for enhancing your shop's visual presentation.

With Text alignment, you can adjust how text is presented, while Icon position offers flexibility in placing icons relative to text or other elements. The Heading and Content settings allow for structured layouts and rich text formatting, including links and basic styling. Button style and Button layout settings enable you to customize the appearance and functionality of buttons, ensuring they align with your brand's aesthetic.

Usage examples include creating promotional banners by adjusting headings and content, designing product feature sections with icons and captions, and customizing call-to-action buttons to guide users effectively. These settings provide a robust framework for tailoring the visual and functional aspects of your theme, ensuring a cohesive and engaging user experience.

Overview​

The Rich text content settings group is designed to control the overall look and feel of your shop's theme. These settings are applied globally across the theme but can be overridden at the section or block level to allow for more granular customization. They include options for text alignment, icon positioning, and button styles, among others, providing a comprehensive toolkit for tailoring the visual presentation of your shop.

Key components and functionality​

Text alignment​

This setting allows you to control the alignment of text within the theme. Options typically include left, center, and right alignment, enabling you to adjust the presentation of text to suit your design preferences.

Icon position​

This setting determines where icons are placed relative to text or other elements. Options include top, bottom, center, left, and right, providing flexibility in how icons are integrated into the design.

Icon​

The icon setting allows you to specify an icon to be displayed. You can enter the name of the icon you wish to use, and it will be shown in the designated area. If left blank, no icon will be displayed.

Caption​

This setting enables you to add a caption to your content. It supports inline rich text, allowing for basic formatting such as bold and italic.

Heading​

The heading setting allows you to specify a heading for your content. This can be used to create structured layouts and improve the readability of your content.

Heading type​

This setting lets you choose the type of heading to use, ranging from paragraph (p) to heading levels h1 through h6. The default is h2.

Content​

This setting provides a rich text editor for adding and formatting text content. You can include links and basic formatting such as bold and italic. The default content is a placeholder paragraph encouraging you to add relevant text.

Text size​

This setting allows you to adjust the size of the text, with options including small, medium, large, and extra large. The default size is medium.

Button icon​

The button icon setting lets you specify an icon to be displayed on a button. Enter the icon name to use it, or leave it blank to hide the icon.

Button text​

This setting allows you to specify the text that appears on a button. If left empty, no text will be displayed on the button.

This setting enables you to add a URL to a button, turning it into a clickable link that directs users to the specified location.

This checkbox setting allows you to specify whether the button link should open in a new tab. The default is false.

Button style​

This setting provides options for styling buttons, including primary, secondary, extra large, plain, small, and small secondary styles.

Button layout​

This setting determines the layout of the button, with options such as icon left, icon right, and icon only, allowing for customization of the button's appearance.

Usage examples​

  1. Creating a promotional banner: You might consider using the heading and content settings to create a compelling message, adjusting the text alignment and size for emphasis, and adding a button with a link to a special offer page.

  2. Designing a product feature section: Consider utilizing the icon and icon position settings to highlight key product features, and use the caption and content settings to provide detailed descriptions.

  3. Customizing a call-to-action button: You might consider adjusting the button style and layout to match your brand's aesthetic, and using the button text and link settings to guide users to a specific action, such as signing up for a newsletter.

These settings provide a robust framework for customizing the visual and functional aspects of your theme, ensuring a cohesive and engaging user experience.